<template>
  <div class="m_contentBox">
    <a-card :bordered="false">
      <div class="m_aCardBox" style="background: #FFFFFF;">
        <div class="cardBox">
          <div class="text1"> {{$t('message.Personal_Information_Redacted')}}</div>
          <div class="box1">
            <div class="text2"> C</div>
            <a-spin :spinning="confirmLoading">
              <div class="box1_item">
                <div class="box1_item_tr1">
                  <div class="box1_item_tr1_label">{{$t('message.User_Accounts')}}</div>
                </div>
                <a-input :placeholder="$t('message.Please_enter_the_user_account')" v-model="model.username" :disabled="true"
                         style="margin: 10px 0;"/>
              </div>
              <div class="box1_item">
                <div class="box1_item_tr1">
                  <div class="box1_item_tr1_label"><span>*</span>{{$t('message.User_name')}}</div>
                  <div class="box1_item_tr1_btn" @click="onEdit('realnameDisabled')" v-if="realnameDisabled">{{$t('message.Edit')}}</div>
                  <div class="box1_item_tr1_btn" @click="handleSubmit('realname')" v-else>>{{$t('message.Save')}}</div>
                </div>
                <a-input :placeholder="$t('message.Please_enter_the_user_name')" v-model="model.realname" :disabled="realnameDisabled"
                         style="margin: 10px 0;"/>
              </div>
              <div class="box1_item">
                <div class="box1_item_tr1">
                  <div class="box1_item_tr1_label"><span>*</span>{{$t('message.phone')}}</div>
                  <div class="box1_item_tr1_btn" @click="onEdit('phoneDisabled')" v-if="phoneDisabled">{{$t('message.Edit')}}</div>
                  <div class="box1_item_tr1_btn" @click="handleSubmit('phone')" v-else>>{{$t('message.Save')}}</div>
                </div>
                <a-input :placeholder="$t('message.Please_enter_phone')"  v-model="model.phone" :disabled="phoneDisabled"
                         style="margin: 10px 0;"/>
              </div>
              <div class="box1_item">
                <div class="box1_item_tr1">
                  <div class="box1_item_tr1_label"><span>*</span>{{$t('message.email')}}</div>
                  <div class="box1_item_tr1_btn" @click="onEdit('emailDisabled')" v-if="emailDisabled">{{$t('message.Edit')}}</div>
                  <div class="box1_item_tr1_btn" @click="handleSubmit('email')" v-else>>{{$t('message.Save')}}</div>
                </div>
                <a-input :placeholder="$t('message.Please_enter_email')" v-model="model.email" :disabled="emailDisabled"
                         style="margin: 10px 0;"/>
              </div>
              <div class="box1_item">
                <div class="box1_item_tr1">
                  <div class="box1_item_tr1_label"><span>*</span>{{$t('message.password')}}</div>
                  <div class="box1_item_tr1_btn" @click="onEdit('passwordDisabled')" v-if="passwordDisabled">{{$t('message.Edit')}}</div>
                  <div class="box1_item_tr1_btn" @click="handleSubmit('password')" v-else>>{{$t('message.Save')}}</div>
                </div>
                <a-input :placeholder="$t('message.Please_enter_password')" v-model="model.password" :disabled="passwordDisabled"
                         style="margin: 10px 0;"/>
              </div>
            </a-spin>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script>

import moment from 'moment'
import {getAction, postAction} from '@/api/manage';
import {duplicateCheck} from '@/api/api'
import {mapActions} from "vuex";
import {remove_TPYZ_SearchRecords} from "@/common/storage";

export default {
  name: 'userInfo',
  data() {
    return {
      model: {},
      confirmLoading: false,
      url: {
        save: "/orgUser/save",
        curUser: "/orgUser/cur",
      },
      realnameDisabled: true, //
      phoneDisabled: true, //
      emailDisabled: true, //
      passwordDisabled: true, //
    }
  },
  created() {
    this.getCurUser()
  },
  methods: {
    moment,
    ...mapActions(["Logout"]),
    /**
     * 编辑
     * @param type
     */
    onEdit(type) {
      if (this.realnameDisabled && this.phoneDisabled && this.emailDisabled && this.passwordDisabled) {
        this[type] = false
      } else {
        this.$message.warning(this.$t('message.Only_one_item_can_be_edited_at_a_time'))
      }
    },
    /**
     * 获取用户信息
     */
    getCurUser() {
      this.realnameDisabled = true;
      this.phoneDisabled = true;
      this.emailDisabled = true;
      this.passwordDisabled = true;
      this.confirmLoading = true;
      getAction(this.url.curUser).then(res => {
        if (res.success) {
          this.model = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    /**
     * 校验手机号
     */
    checkPhone(value) {
      if (new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)) {
        return true
      } else {
        return false
      }
    },
    /**
     * 校验邮箱格式
     */
    checkEmail(value) {
      if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
        return true
      } else {
        return false
      }
    },
    /**
     * 保存用户信息
     * @param type 点的哪个保存
     */
    handleSubmit(type) {
      if (!this.model[type]) {
        if (type == 'realname') {
          this.$message.warning(this.$t('message.The_users_name_cannot_be_empty'))
          return
        }
        if (type == 'phone') {
          this.$message.warning(this.$t('message.The_mobile_phone_number_cannot_be_empty'))
          return
        }
        if (type == 'email') {
          this.$message.warning(this.$t('message.The_mailbox_cannot_be_empty'))
          return
        }
        if (type == 'password') {
          this.$message.warning(this.$t('message.The_password_cannot_be_empty'))
          return
        }
      }
      if (this.model[type] && !(new RegExp(/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$/).test(this.model[type])) && type == 'password') {
        this.$message.warning(this.$t('message.upper_and_lower_case_letters_and_special_symbols'))
        return
      }


      if (type == 'phone' && !this.checkPhone(this.model[type])) {
        this.$message.warning(this.$t('message.Please_enter_the_mobile_phone_number_in_the_correct_format'))

        return
      }
      if (type == 'email' && !this.checkEmail(this.model[type])) {
        this.$message.warning(this.$t('message.Please_enter_the_email_address_in_the_correct_format'))
        return
      }
      this.confirmLoading = true;
      postAction(this.url.save, this.model).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          if (type == 'password') {
            // 修改密码重新登录
            this.Logout({}).then(() => {
              remove_TPYZ_SearchRecords()
              window.location.reload()
            }).catch(err => {
              this.$message.error({title: $t('message.Error'), description: err.message})
            })
          } else {
            // 修改其他信息，重新获取用户信息
            this.getCurUser()
          }
        } else {
          this.$message.warning(res.message);
        }
      }).finally(() => {
        this.confirmLoading = false;
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-body {
  background: #F5F8F7;
}

/deep/ .ant-input {
  border: none;
  background: #fff;
  padding: 4px 0;
}

.cardBox {
  padding: 24px;
  background: #FFFFFF;
  border-radius: 3px;
}

.text1 {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
}

.text2 {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #FFFFFF;
  border-radius: 50%;
  border: 1px solid #148958;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36px;
  color: #148958;
}

.box1 {
  margin: 24px auto 0;
  width: 700px;
}

.box1_item {
  margin-top: 24px;
  border-bottom: 1px solid #E7E7E7;
}

.box1_item_tr1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box1_item_tr1_label {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;

  span {
    color: #CF0D66;
  }
}

.box1_item_tr1_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #148958;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #148958;
  cursor: pointer;
}
</style>
